<template>
    <!-- 签署任务概要 -->
    <div class="proofSignDetail">
        <div class="padding15All" style="height:50px;box-sizing:border-box;">
            <el-button icon="el-icon-arrow-left" size="mini" @click="back">返回</el-button>
            签署任务概要
        </div>
        <div style="height:20px;background-color: #F5F6F7;"></div>
        <div class="desc">
            <div class="said">
                 <el-descriptions :colon="false" title="签署任务概要">
                    <el-descriptions-item :contentStyle="{'padding':'20px','border': '1px solid #eee'}">
                        <el-descriptions title="" :column="2">
                            <el-descriptions-item label="编号">{{content.contractNum}}</el-descriptions-item>
                            <el-descriptions-item label="名称">{{content.contractName}}</el-descriptions-item>
                            <!-- <el-descriptions-item label="是否包含免密签署">否</el-descriptions-item> -->
                            <el-descriptions-item label="任务起止时间">{{content.insertTime}}~{{content.signEedTime}}</el-descriptions-item>
                            <!-- <el-descriptions-item label="签署类型">原文签署</el-descriptions-item> -->
                        </el-descriptions>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="said">
                 <el-descriptions :colon="false" title="签署任务完成信息">
                    <el-descriptions-item :contentStyle="{'padding':'20px','border': '1px solid #eee'}">
                        <el-descriptions title="" :column="2">
                            <el-descriptions-item label="签署合同份数">1份</el-descriptions-item>
                            <el-descriptions-item label="合同名称">{{content.contractFile}}</el-descriptions-item>
                            <el-descriptions-item label="合同ID">{{content.contractIdStr}}</el-descriptions-item>
                            <el-descriptions-item label="签署方" :labelStyle="{'align-items':'center'}" :contentStyle="{'flex-direction':'column'}">
                                <div class="" v-for="(item) in content.signUserList" :key="item.userId">
                                    <p>{{item.enterpriseName}}({{item.userName}})</p>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="flexcenter">
                 <el-button type="primary" @click="goCard">电子版出证</el-button>
            </div>
        </div>

        <!-- <el-dialog title="电子版出证" :visible.sync="dialogFormVisible"  width="1000px">
            <div class="" v-loading="fullscreenLoading">
                <div class="electricity flexbetween padding15All">
                    <div class="detail padding15 flexleft">
                        <img src="@/assets/img/system/ele.png" alt="">
                        <div class="tit">
                            <h3> e签宝证据报告 </h3>
                            <p> e签宝为电子签名产品出具的证据报告，包含“真实身份，真实意愿，签名未改，原文未改”等相关签署事实。 </p>
                        </div>
                    </div>
                    <div class="option padding15" v-if="buyEvidenceReport==0">
                        <div> 本次使用<span class="price">1</span>份<span>,剩余</span><span class="price">{{evidenceReport}}</span><span>份</span></div>
                        <div class="flexbetween">
                            <el-link type="primary" :underline="false" @click="goPayInfo">套餐充值</el-link>
                            <el-button type="primary" size="small" @click="goMyorder(1)">出证</el-button>
                        </div>
                    </div>
                    <div class="option padding15" v-if="buyEvidenceReport==1">
                    <div class="flexbetween">
                        <p style="margin-right:20px;">出证成功</p>
                        <a href="">
                            <el-button type="primary" size="small">下载</el-button>
                        </a>
                        
                    </div>
                </div>
                </div>
                <div class="electricity flexbetween padding15All">
                    <div class="detail padding15 flexleft">
                        <img src="https://asset.tsign.cn/apps/saas-microfe/evidence-front/prod/0.2.2/img/ant2.4610c0cf.png" alt="">
                        <div class="tit">
                            <h3> 区块链全流程存证证据报告 </h3>
                            <p> e签宝联合蚂蚁区块链针对用户签署过程的数据以及签署完成的电子文件数据出具的证明文件。可通过统一证据编号在蚂蚁区块链官网核验存证事实的真实性（签署过程数据单独核验）。 </p>
                        </div>
                    </div>
                    <div class="option padding15" v-if="buyChainSignature==0">
                        <div> 本次使用<span class="price">1</span>份<span>,剩余</span><span class="price">{{chainSignature}}</span><span>份</span></div>
                        <div class="flexbetween">
                            <el-link type="primary" :underline="false">套餐充值</el-link>
                            <el-button type="primary" size="small" @click="goMyorder(2)">出证</el-button>
                        </div>
                    </div>
                    <div class="option padding15" v-if="buyChainSignature==1">
                        <div class="flexbetween">
                            <p style="margin-right:20px;">出证成功</p>
                            <a :href="chainSignatureUrl">
                                <el-button type="primary" size="small">下载</el-button>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="electricity flexbetween padding15All" style="margin:0;">
                    <div class="detail padding15 flexleft">
                        <img src="@/assets/img/system/ele1.png" alt="">
                        <div class="tit">
                            <h3> 公证证明 </h3>
                            <p> 杭州互联网公证处出具的电子合同存证证明，相关电子文件的签署过程及签署后的文件已通过蚂蚁区块链进行证据固定，可通过编号在杭州互联网公证处官网核验证明的真实性，或可通过统一证据编号在蚂蚁区块链官网核验存证事实的真实性。 </p>
                        </div>
                    </div>
                    <div class="option padding15" v-if="buyNotarialSignature==0">
                        <div> 本次使用<span class="price">1</span>份<span>,剩余</span><span class="price">{{notarialSignature}}</span><span>份</span></div>
                        <div class="flexbetween">
                            <el-link type="primary" :underline="false" @click="goPayInfo">套餐充值</el-link>
                            <a :href="notarialSignatureUrl">
                                <el-button type="primary" size="small" @click="goMyorder(3)">出证</el-button>
                            </a>
                            
                        </div>
                    </div>
                    <div class="option padding15" v-if="buyNotarialSignature==1">
                        <div class="flexbetween">
                            <p style="margin-right:20px;">出证成功</p>
                            <el-button type="primary" size="small">下载</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
            </div>
            
        </el-dialog> -->
        <el-dialog title="电子版出证" :visible.sync="dialogFormVisible"  width="1000px">
            <div class="" v-loading="fullscreenLoading">
                <div class="electricity flexbetween padding15All" v-for="(item) in reciationList" :key="item.id">
                    <div class="detail padding15 flexleft">
                        <img v-if="item.classify==1" src="@/assets/img/system/ele.png" alt="">
                        <img v-if="item.classify==2" src="https://asset.tsign.cn/apps/saas-microfe/evidence-front/prod/0.2.2/img/ant2.4610c0cf.png" alt="">
                        <img v-if="item.classify==3" src="@/assets/img/system/ele1.png" alt="">
                        <div class="tit">
                            <h3> {{item.name}} </h3>
                            <p> {{item.explanation}} </p>
                        </div>
                    </div>
                    <template v-if="item.classify==1">
                        <div class="option padding15" v-if="buyEvidenceReport==0">
                            <div> 本次使用<span class="price">1</span>份<span>,剩余</span><span class="price">{{evidenceReport}}</span><span>份</span></div>
                            <div class="flexbetween">
                                <el-link type="primary" :underline="false" @click="goPayInfo(item)">套餐充值</el-link>
                                <el-button type="primary" size="small" @click="goMyorder(item.classify,evidenceReport)">出证</el-button>
                            </div>
                        </div>
                        <div class="option padding15" v-if="buyEvidenceReport==1">
                            <div class="flexbetween">
                                <p style="margin-right:20px;">出证成功</p>
                                <a target="_blank" :href="evidenceReportUrl">
                                    <el-button type="primary" size="small">下载</el-button>
                                </a>
                            </div>
                        </div>
                    </template>
                    <template v-if="item.classify==2">
                        <div class="option padding15" v-if="buyChainSignature==0">
                            <div> 本次使用<span class="price">1</span>份<span>,剩余</span><span class="price">{{chainSignature}}</span><span>份</span></div>
                            <div class="flexbetween">
                                <el-link type="primary" :underline="false" @click="goPayInfo(item)">套餐充值</el-link>
                                <el-button type="primary" size="small" @click="goMyorder(item.classify,chainSignature)">出证</el-button>
                            </div>
                        </div>
                        <div class="option padding15" v-if="buyChainSignature==1">
                            <div class="flexbetween">
                                <p style="margin-right:20px;">出证成功</p>
                                <a target="_blank" :href="chainSignatureUrl">
                                    <el-button type="primary" size="small">下载</el-button>
                                </a>
                            </div>
                        </div>
                    </template>
                    <template v-if="item.classify==3">
                        <div class="option padding15" v-if="buyNotarialSignature==0">
                            <div> 本次使用<span class="price">1</span>份<span>,剩余</span><span class="price">{{notarialSignature}}</span><span>份</span></div>
                            <div class="flexbetween">
                                <el-link type="primary" :underline="false" @click="goPayInfo(item)">套餐充值</el-link>
                                
                                    <el-button type="primary" size="small" @click="goMyorder(item.classify,notarialSignature)">出证</el-button>
                                
                            </div>
                        </div>
                        <div class="option padding15" v-if="buyNotarialSignature==1">
                            <div class="flexbetween">
                                <p style="margin-right:20px;">出证成功</p>
                                <a target="_blank" :href="notarialSignatureUrl">
                                    <el-button type="primary" size="small">下载</el-button>
                                </a>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
            </div>
            
        </el-dialog>
    </div>
</template>

<script>
import { signOffDetail,certificateRequest,appreciationList,signAppreciationList } from '@/api/proof'
export default {
    data(){
        return{
            fullscreenLoading: false,
            dialogFormVisible:false,

            contractId:'',
            content:'',


            // 增值服务
            reciationList:[],
            buyChainSignature: 0,// 增值服务——上链签署是 否购买 0 否 1是
            buyEvidenceReport: 0,// 增值服务——证据报告是 否购买 0 否 1是
            buyNotarialSignature: 0,// 增值服务——公证签署 是否购买 0 否 1是
            chainSignature: 0,// 增值服务——上链签署
            evidenceReport: 0,// 增值服务——证据报告
            notarialSignature: 0,// 增值服务——公证签署
            chainSignatureUrl:'',//	增值服务——上链签署 URL
            evidenceReportUrl:'',// 增值服务——证据报告url
            notarialSignatureUrl:'',//增值服务——公证签署Url
        }
    },
    mounted(){
        this.contractId=this.$route.query.contractId
        this.getSignOffDetail()
    },
    methods:{
        // 获取签署详情
        getSignOffDetail(){
            signOffDetail({
                contractId:this.contractId
            }).then(res => {
                this.content = res.result
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        // 电子版出证
        goCard(){
            this.dialogFormVisible = true
            this.getSignAppreciationList()
            this.getAppreciationList(this.contractId)
        },
        // 获取增值服务列表
        getSignAppreciationList(){
            this.fullscreenLoading = true;
            signAppreciationList().then(res => {
                this.fullscreenLoading = false;
                this.reciationList=res.result
            }).catch(err => {
                this.fullscreenLoading = false;
                console.log("请求失败", err)
            })
        },
        // 查询剩余增值服务
        getAppreciationList(id){
            appreciationList({
                contractId:id
            }).then(res => {
                let {
                    buyChainSignature,
                    buyEvidenceReport,
                    buyNotarialSignature,
                    chainSignature,
                    evidenceReport,
                    notarialSignature,
                    chainSignatureUrl,
                    evidenceReportUrl,
                    notarialSignatureUrl
                }=res.result
                this.buyChainSignature=buyChainSignature
                this.buyEvidenceReport=buyEvidenceReport
                this.buyNotarialSignature=buyNotarialSignature
                this.chainSignature=chainSignature
                this.evidenceReport=evidenceReport
                this.notarialSignature=notarialSignature
                this.chainSignatureUrl=chainSignatureUrl//	增值服务——上链签署 URL
                this.evidenceReportUrl=evidenceReportUrl// 增值服务——证据报告url
                this.notarialSignatureUrl=notarialSignatureUrl//增值服务——公证签署Url
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        back(){
            this.$router.push({name:'proofSign'},()=>{})
        },


        // 出证
        goMyorder(type,num){
            if(num==0){
                this.$message.warning('出证次数不足，请充值后再次出证')
                return
            }
            this.fullscreenLoading = true;
            certificateRequest({
                contractId:this.contractId,
                requestType:type
            }).then(res => {
                this.fullscreenLoading = false;
                Message({
                    message: res.result.requestResult,
                    type: 'success',
                    duration: 2000,
                })
                // this.$router.push({name:'myOrder'})
                this.getAppreciationList(this.contractId)
            }).catch(err => {
                this.fullscreenLoading = false;
                console.log("请求失败", err)
            })
        },
        goPayInfo(item){
            let userInfomsg=this.$store.state.user.userInfomsg
            let obj={
                money:item.money,// 价格
                timeliness:item.timeliness,// 有效期
                name:item.name,//  产品名称
                // totalPrice:item.totalPrice,// 合计价格
                id:item.id,// 增值服务id
                signPayType:userInfomsg.lastLoginType,// 类型 0个人1企业
                type:1,// 类型0鸿签1增值
                enterpriseId:userInfomsg.lastLoginType==1?userInfomsg.lastLoginId:'',//企业id
            }
            this.$router.push({name:'payInfo',params:obj},()=>{})
        },
        // 出证
        // goMyorder(type){
        //     this.fullscreenLoading = true;
        //     certificateRequest({
        //         contractId:this.contractId,
        //         requestType:type
        //     }).then(res => {
        //         this.fullscreenLoading = false;
        //         Message({
        //             message: res.result.requestResult,
        //             type: 'success',
        //             duration: 2000,
        //         })
        //         // this.$router.push({name:'myOrder'})
        //         this.getAppreciationList(this.contractId)
        //     }).catch(err => {
        //         this.fullscreenLoading = false;
        //         console.log("请求失败", err)
        //     })
        // },
        // goPayInfo(){
        //     this.$router.push({name:'payInfo'},()=>{})
        // },
    }
}
</script>

<style lang="scss" scoped>
.proofSignDetail{
    .desc{
        padding-top: 60px;
        .said{
            width: 80%;
            margin: 0 auto;

            border: 1px solid #eee;
            padding: 20px;
            font-size: 12px;
            margin-bottom: 30px;
        }
    }
        .electricity{
        border: 1px solid #eee;
        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
        margin-bottom: 16px;
        .detail{
            width: 60%;
            img{
                width: 110px;
                height: 110px;
                margin-right: 20px;
            }
        }
        .option{
            div{
                margin-bottom: 16px;
            }
            .price{
                color: red;
                font-weight: 800;
            }
        }
    }
}
</style>